<template>
	<!-- 验证码登录 -->
	<view class="content">
		<view class="empty"></view>
		<view class="title">
			<span>登录/注册</span><br>
			<span>辅助标语</span>
		</view>
		<view class="input">
			<view class="dd">
				<span>+86</span>
				<input class="inputID" type="number" v-model="number" placeholder="请输入手机号" maxlength="11">
			</view>
			<view class="dd">
				
				<input class="inputID" v-model="verifyCode"
				 maxlength="6" placeholder="请输入验证码">
				<button :class="verifySend?'verify2':'verify1'" @click="getVerify">
					{{verifySend?'获取验证码（'+restTime+')':"获取验证码"}}
				</button>
				
			</view>
		</view>
		<view class="verifyLogin">
			<span @click="toLogin1">密码登录</span><br>
		</view>
		<view class="login">
			<button ref="button" class="button" 
			:style="isQualified?'color:#FFFFFF;background-color:#08C8BD;':''" 
			@click="submit">立即登录</button>
		</view>
		<view class="agree">
			<view class="img" v-show="!agree" @click="agree=true">
				<image src="/static/img/login/Group111@2x.png" alt="" v-show="!agree" mode="scaleToFill"></image>
			</view>
			<view class="img" v-show="agree" @click="agree=false">
				<image src="/static/img/login/Group111@2x2.png" alt="" v-show="agree" mode="scaleToFill"></image>
			</view>
			
			<span>登录即同意</span><span>《一键登录协议》</span><span>与</span><span>《用户使用协议》</span><br>
			<span>以及</span><span>《隐私声明》</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:'',			//帐号名
				verifyCode:'',				//密码
				passwordShow:false,	//是否隐藏密码
				isQualified:false,	//帐号密码格式是否合法
				agree:false,		//是否同意用户登录协议
				
				verifySend:false,	//验证码是否发送
				restTime:0			//验证码重发倒计时
			};
		},onLoad(){
			
		},
		watch:{
			number(){
				if(this.number.length===11&&this.verifyCode.length>=4){
					this.isQualified=true
				}else{
					this.isQualified=false
				}
			},
			verifyCode(){
				if(this.number.length===11&&this.verifyCode.length>=4){
					this.isQualified=true
				}else{
					this.isQualified=false
				}
				
			}
		},
		methods:{
			submit(){
				if(this.isQualified){
					uni.getSystemInfo({
						success:res=>{
							console.log(res);
							
							let requestData={
									brand:res.brand,
									did:uni.getStorageSync('did'),
									loginId:this.number,
									passport:this.verifyCode,
									loginType:'userSmsLogin',
									osVersion:res.system+' '+res.version,
									userId:uni.getStorageSync('userId'),
									launchMode:'cold',
								}
							console.log('requestData',requestData);
							this.$http.request({
								url:'/user/login',
								data:requestData
							}).then((result)=>{
								let res=result.data
								console.log(res);
								uni.setStorageSync('userId', res.data.userId)
								uni.setStorageSync('token',res.data.loginToken)
								uni.setStorageSync('loginInfo',res.data)
								// 48e619b05c42eeb0a7e4e395352a79b0
								
								uni.navigateBack({
									delta:1
								})
								
							})
						}
					})
					
				}
			},
			//获取验证码
			getVerify(){
				// 验证码倒计时(60秒)
				if(this.verifySend===false){
					this.verifySend=true;
					this.restTime=60;
					let timer=setInterval(()=>{
						this.restTime--;
						if(this.restTime===0){
							this.verifySend=false;
							clearInterval(timer)
						}
					},1000)
					
				}
				
				let requestData={
					loginId:this.number,
					loginType:"initSms",
					did:uni.getStorageSync('did'),
					productType:0
				}
				console.log(requestData);
				this.$http.request({
					url:'/user/login',
					data:requestData
				}).then(result=>{
					let res=result.data
					console.log('/user/login响应',res);
					
				})
				
			},
			toLogin1(){
				uni.redirectTo({
					url:'./login1'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background-color: #FFFFFF;
		.empty{
			height: 1px;
		}
		.title{
			margin-left: 32rpx;
			margin-top: 172rpx;
			span:nth-of-type(1){
				font-size: 24px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			span:nth-of-type(2){
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #08C8BD;
			}
		}
		
		.input{
			margin: 32rpx;
			margin-bottom: 0;
			.dd{
				display: flex;
				padding: 32rpx 0;
				border-bottom: 1px solid #F5F5F5;
				
				>span{
					padding-right: 32rpx;
					border-right: 1px solid #F5F5F5;
				}
				.inputID{
					position: relative;
					margin-left: 32rpx;
				}
				
				.verify1{
					position: absolute;
					right: 32rpx;
					transform: translate(0,-14rpx);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					background: #08C8BD;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.verify2{
					position: absolute;
					right: 32rpx;
					transform: translate(0,-14rpx);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					background: #D9D9D9;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			
		}
		.verifyLogin{
			>span{
				display: block;
				margin: 32rpx;
				float: right;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #505E5C;
			}
		}
		
			
		.button{
			margin: 32rpx;
			width: 686rpx;
			background: #F3F7F8;
		}
		
		.agree{
			margin-left: 100rpx;
			text-align: center;
			position: absolute;
			bottom:50rpx;
			.img{
				display: inline-block;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					vertical-align: -4rpx;
				}
			}
			
			span:nth-of-type(odd){
				font-size: 24rpx;
				color: #99A3A3;
			}
			span:nth-of-type(even){				
				font-size: 24rpx;
				color: #08C8BD;
			}
		}
	}
</style>
